<template>
    <div class="header">
        <div class="header-left">河南大学投票系统后台管理界面</div>
        <div class="header-right" @click="handleClick">
            管理员{{this.userId}}
            <span class="iconfont arrow-icon">&#xeb6d;</span>
        </div>
        <div class="header-fix" v-show="show" @click="handleBack">
            退出登录
        </div>
    </div>
</template>

<script>
import { mapState } from 'Vuex'
export default {
  name: 'HomeHeader',
  data () {
    return {
      show: false
    }
  },
  computed: {
    ...mapState(['userId'])
  },
  methods: {
    handleClick () {
      this.show = !this.show
    },
    handleBack () {
      this.$router.push('/')
    }
  },
  activated () {
    this.show = false
  }
}
</script>
<style lang="stylus" scoped>
@import '~style/variable.styl'
    .header
        display: flex
        height: 1.5rem
        line-height: 1.5rem
        font-size: .40rem
        padding: 0 .32rem
        background-image: linear-gradient(top,rgba(0, 0, 0, 0.1),rgba(0, 0, 0, 0.05))
        border: .02rem solid #ddd
        .header-left
            flex:1
        .header-right
            float: right
        .header-fix
            position: absolute
            right: 0
            line-height: .8rem
            top: 1.5rem
            padding: 0rem 1.5rem  0  .4rem
            border: .02rem solid #666
            box-shadow: .1rem .1rem .1rem rgba(0,0,0,0.27)
            color: #666
</style>
